<template>
	<!-- 弹层选择房间 -->
	<view>
		<villageBindHouse v-if="bind_options.need_bind_house" :options="bind_options" @cancleBindHouse="cancleBindHouse"></villageBindHouse>
		<uni-popup @click="openPopup" ref="popup" type="center" class="villageHousePopup" :maskClick="canCancle">
			<view class="popup-box">
				<view class="popup-img1">
					<image src="../../static/images/bg1.png" class="icon-img1"></image>
				</view>
				<view class="popup-img pigcmsIdView">
					<lang keywords="请选择户号"></lang>
				</view>
				<scroll-view class="popup-list" scroll-y="true" scroll-top="0" show-scrollbar="false">
					<view class="popup-card" v-for="(item, index) in listhouseData" @tap="goVillagehouse" :data-pigcms_id="item.pigcms_id">{{ item.address }}</view>
				</scroll-view>
				<view @click="closePopup" class="popup-btnl" v-if="canCancle">
					<image src="../../static/images/guanbi.png" class="popup-img2"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import common from '../../utils/common.js';
	import uniPopup from "../uni/uni-popup/uni-popup.vue"
	import villageBindHouse from './villageBindHouse';

	var _this;
	var app = getApp();
	export default {
		name: 'villageChooseHouse',
		props: {
			options: {
				type: Object,
				default: {}
			},
		},
		components: {
			villageBindHouse,
			uniPopup
		},
		data() {
			return {
				need_choose_house: false,
				pigcms_id: 0,
				village_id: 0,
				canCancle: true,
				bindHasCancleMethod: true,
				after_event: '',
				listhouseData: [],
				bind_options: {}
			}
		},
		watch: {
			options: {
				immediate: true,
				handler(new_var) {
					var options = new_var
					console.log('78 villageChooseHouse', new_var)
					console.log('78 villageChooseHouse this', this)
					if (!options) return;
					for (var i in options) {
						this[i] = options[i]
					}
					if (options.need_choose_house) {
						common.post(
							'HouseApi&a=village_list_old', {
								village_id: options.village_id
							},
							data => {
								console.log('HouseApi&a=village_list_old', data);
								_this.listhouseData = data;
								//选择的不是自己的小区
								if (data.length == 0) {
									console.log("没有房间")
									_this.bind_options = {
										need_bind_house: true,
										village_id: options.village_id,
										bindHasCancleMethod: _this.bindHasCancleMethod,
									};
								} else if (data.length == 1) {
									console.log("一个房间")
									_this.pigcms_id = data[0].pigcms_id
									_this.goVillagehouse();
								} else {
									_this.openPopup();
								}
							}
						);
					} else {

					}
				}
			}
		},
		created() {
			_this = this;
		},
		methods: {
			cancleBindHouse: function() {
				console.log('_this.bind_options', _this.bind_options);
				_this.bind_options.need_bind_house = false;
				console.log(123456);
			},
			goVillagehouse: function(e) {
				if (typeof e == 'object') {
					_this.pigcms_id = e.currentTarget.dataset.pigcms_id;
				}
				var res = uni.getStorageSync("village_key");
				res.pigcms_id = _this.pigcms_id;
				uni.setStorageSync('village_key', res);
				_this.closePopup();
				this.$emit('goVillagehouse');
				this.$emit('chooseHouseId', {
					pigcms_id: _this.pigcms_id,
					after_event: _this.after_event
				});
			},
			openPopup() {
				this.$refs.popup.open();
			},
			closePopup() {
				this.$refs.popup.close();
			},
		}
	}
</script>
<style>
	/* appComponent/villageBindHouse/villageBindHouse.css */
	.need_bind_mask {
		position: fixed;
		left: 0px;
		width: 100%;
		height: 100%;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.7);
		z-index: 888;
	}

	.need_bind_popup {
		position: fixed;
		width: 84%;
		margin: 0 8%;
		margin-top: -357rpx;
		top: 50%;
		left: 0px;
		background: url(https://hf.pigcms.com/tpl/Wap/pure/static/village_list/images/yztc.png) center top no-repeat;
		background-size: 100% 468rpx;
		z-index: 999;
	}

	.need_bind_popup .p400 {
		margin-top: 468rpx;
		background: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		border-radius: 0px 0px 3rpx 3rpx;
	}

	.need_bind_popup .p400 .p {
		font-size: 32rpx;
		color: #666666;
		line-height: 32rpx;
		padding: 38rpx 0 38rpx 0;
		text-align: justify;
	}

	.fl {
		float: left;
		display: inline;
	}

	.fr {
		float: right;
		display: inline;
	}

	.need_bind_popup .p400 .button .view {
		width: 45%;
		text-align: center;
		line-height: 80rpx;
		font-size: 32rpx;
		border-radius: 8rpx;
	}

	.need_bind_popup .p400 .button .view.cancel {
		color: #999999;
		border: #c9c9c7 1px solid;
		background: #f6f7f2;
	}

	.need_bind_popup .p400 .button .view.binding {
		color: #fff;
		border: #00d674 1px solid;
		background: #00d674;
	}

	.clr {
		zoom: 1;
	}

	.clr:after {
		visibility: hidden;
		display: block;
		content: " ";
		clear: both;
		height: 0;
		line-height: 0;
	}


	/* 弹层 */
	.popup-box {
		width: 610rpx;
		height: 720rpx;
		border-radius: 10px;
	}

	.popup-img {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 100rpx;
	}

	.popup-img1 {
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -150rpx;
	}

	.pigcmsIdView {
		font-size: 40rpx;
		font-weight: 600;
		color: #333;
	}

	.icon-img1 {
		width: 100%;
		height: 100%;
	}

	.popup-list {
		position: absolute;
		top: 185rpx;
		width: 540rpx;
		height: 560rpx;
		border-radius: 10px;
		overflow: hidden;
	}

	.popup-card {
		width: 439rpx;
		height: 77rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 77rpx;
		letter-spacing: 0rpx;
		color: #333333;
		border-radius: 5px;
		/*background: rgba(245, 245, 245, 1);*/
		margin: 10rpx auto;
	}

	.popup-btnl {
		position: absolute;
		bottom: -100rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 40rpx;
		border-radius: 58rpx;
		font-size: 26rpx;
		background-color: #ffffff;
		padding: 16rpx;
	}

	.popup-img2 {
		width: 100%;
		height: 100%;
	}

	.popup-btnr {
		position: absolute;
		bottom: 57rpx;
		right: 90rpx;
		font-size: 26rpx;
		width: 200rpx;
		height: 80rpx;
		background: rgba(6, 193, 174, 1);
		border-radius: 40rpx;
		color: #ffffff;
		line-height: 80rpx;
	}
	
</style>
